<script setup lang="ts">
import { useUserSettings } from '@/store/useUserSettings'
import { useNaive } from '@/store/useNaive'

const userSettings = useUserSettings()
userSettings.init()
const naive = useNaive()
</script>

<template>
	<n-config-provider
		:theme="naive.config.theme"
		:locale="naive.config.locale"
		:date-locale="naive.config.dateLocale"
		:theme-overrides="naive.config.themeOverrides"
	>
		<n-global-style />
		<n-el tag="div" _h="screen" _w="screen" _overflow="x-hidden y-auto">
			<router-view v-slot="{ Component }">
				<transition
					leave-to-class="opacity-0 translate-x-1/3"
					enter-from-class="opacity-0 -translate-x-1/5"
					mode="out-in"
				>
					<component :is="Component" _transform="gpu" _transition="duration-500" />
				</transition>
			</router-view>
		</n-el>
	</n-config-provider>
</template>

<style>
::-webkit-scrollbar {
	@apply w-2;
}
.overflow-auto,
.overflow-scroll,
.overflow-x-auto,
.overflow-x-scroll,
.overflow-y-auto,
.overflow-y-scroll {
	&:hover::-webkit-scrollbar-thumb {
		@apply bg-n-scrollbar-color rounded-full;
	}
}
</style>
